<template>
  <div id = "viewerDom">
    <img v-for="item in imgList" :src="item">
  </div>
</template>

<script>
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        name: "index",
        props:{
            imgList:{
                type:Array,
                default:[]
            },
            index:{
                type:Number,
                required:false,
                default: 0
            }
        },
        mounted(){
            // this.viewer.view(this.index)
            const _this=this
            const ViewerDom = document.querySelector('#viewerDom');
            console.log("ViewerDom:"+ViewerDom)
            this.viewer = new Viewer(ViewerDom, {
                initialViewIndex: this.index,
                // inline: true,
                button: true, //右上角关闭按钮
                navbar: 2,
                title: 0,
                toolbar: 0,
                keyboard: false,
                ready: function (e) {
                    // console.log(e.type);
                },
                show: function (e) {
                    // console.log(e.type);
                },
                shown: function (e) {
                    // console.log(e.type);
                },
                hide: function (e) {
                    // console.log(e.type);
                },
                hidden: function (e) {
                    _this.$emit("closeView")
                },
                view: function (e) {
                    // console.log(e.type);
                },
                viewed: function (e) {
                    // console.log(e.type);
                },
                zoom: function (e) {
                    // console.log(e.type);
                },
                zoomed: function (e) {
                    // console.log(e.type);
                }
            });
            this.viewer.show()
        },
        destroyed() {
            this.viewer.destroy()
        }
    }
</script>

<style scoped>
#viewerDom img{
  display: none;
}
</style>
